<!--
 * @Author: your name
 * @Date: 2022-04-17 15:24:49
 * @LastEditTime: 2022-04-17 15:24:51
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \drivingApp\driving-app\src\views\nested\index.vue
-->

<template>
<div class="container">
  <div class="content">
    <div class="button_box">
      <el-button @click="addHandel" type="primary">新增教练车</el-button>
    </div>
    <div class="table">
       <el-table
        :data="vehicleList"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
        >
        <el-table-column
          prop="licensePlate"
          label="车牌号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="brand"
          label="品牌"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="price"
          label="购车价格"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="purchase_date"
          label="购买日期"
          align="center"
          sortable
          >
        </el-table-column>
        <el-table-column
          prop="Renewal_time"
          label="续保时间"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="maturity_time"
          label="保险到期时间"
          align="center"
          >
        </el-table-column>
        <el-table-column
          label="车况状态"
          align="center"
          >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.vehicle_status === 'Using'" type="success">正常使用</el-tag>
            <el-tag v-else type="danger">报废</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="scrap_date"
          align="center"
          label="报废日期"
          >
        </el-table-column>
        <el-table-column width="120" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
             type="text"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
        <el-pagination @current-change="(value) => handleCurrent(value)" :current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="pageTotal">
        </el-pagination>
      </div>
  </div>
  <!-- 对话框 -->
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form label-position="left" :model="form">
      <el-row>
        <el-col :xs="10"  :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="车辆牌号">
          <el-input v-model="form.licensePlate" autocomplete="off"></el-input>
        </el-form-item>
        </el-col>
        <el-col :xs="10" :push="2" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="车辆品牌">
            <el-input v-model="form.brand" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
           <el-form-item label="车辆型号">
            <el-input v-model="form.model" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :push="2" :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="购车价格">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="10"  :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="续保时间">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="form.Renewal_time"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="10" :push="2" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="保险到期">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="form.maturity_time"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="购买日期">
            <el-date-picker
            value-format="yyyy-MM-dd"
              v-model="form.purchase_date"
              :disabled ="title === '修改教练车信息'?true:false"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="10" :push="2" :sm="10" :md="10" :lg="10" :xl="10">
          <el-form-item label="报废日期">
            <el-date-picker
              :disabled ="title === '修改教练车信息'?true:false"
              value-format="yyyy-MM-dd"
              v-model="form.scrap_date"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="title === '修改教练车信息'" type="primary" @click="updateVehicle">修 改</el-button>
      <el-button v-if="title !== '修改教练车信息'" type="primary" @click="addVehicle">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import vehicle from '@/api/vehicle'
export default ({
  data() {
    return{
      title:"",
      dialogFormVisible:false,
      vehicleList:[],
      pageSize:10,
      pageNum:1,
      pageTotal:0,
      form:{
        licensePlate: "",
        purchase_date: "",
        brand: "",
        model: "",
        price: 0,
        Renewal_time: "",
        maturity_time: "",
        vehicle_status: "Using",
        scrap_date: ""
      }
    }
  },
  computed:{
    currentChange(){
      return this.pageNum
    }
  },
  methods:{
    getAllVehicle(value){
      let questBody = {
        pageSize:this.pageSize,
        pageNum:value
      }
      vehicle.getAllVehicle(questBody).then(res => {
        if(res.code === 0){
          this.vehicleList = res.data.list
          this.pageNum = value
          this.pageTotal = res.data.Total
        }
      })
    },
    handleCurrent(value){
      this.getAllVehicle(value)
    },
    handleEdit(row){
      this.form = row
      this.title = "修改教练车信息"
      this.dialogFormVisible = true
    },
    handleDelete(row){
      vehicle.delectVehicle(row.id).then(res => {
        if(res.code === 0){
          this.$message.success('success')
          this.getAllVehicle(this.pageNum)
        }else{
          this.$message.error('error')
        }
      })
    },
    updateVehicle(){
      vehicle.updateVehicle(this.form).then(res => {
        if(res.code === 0){
          this.$message.success('success')
          this.getAllVehicle(this.pageNum)
          this.dialogFormVisible = false
        }else{
          this.$message.error('error')
        }
      })
    },
    addHandel(){
      this.form ={
        licensePlate: "",
        purchase_date: "",
        brand: "",
        model: "",
        price: 0,
        Renewal_time: "",
        maturity_time: "",
        vehicle_status: "Using",
        scrap_date: ""
      }
      this.title = "新增教练车信息"
      this.dialogFormVisible = true
    },
    addVehicle(){
      vehicle.createVehicle(this.form).then(res => {
        if(res.code === 0){
          this.$message.success('success')
          this.getAllVehicle(1)
          this.dialogFormVisible = false
        }else{
          this.$message.error('error')
        }
      })
    },
  },
  mounted(){
    this.getAllVehicle(1)
  }
})
</script>


<style scoped lang="scss">
  .container{
    .content{
      position: relative;
      .pagination{
        margin-top: 2%;
        position: absolute;
        left: 45%;
      }
    }
    .el-dialog{
      .el-form{
        .el-input{
          width: 60%;
        }
      }
    }

  }
</style>